<template>
	<view class="org-structure">
        <view class="txl-step-bar" v-if="stepBar.length>0">
            <view v-for="(item, i) in stepBar" :key="i" :class="item.id ==activeId?'active':''">
                <uni-icons v-if="item.id!=-1" type="right" size="20rpx" :color="item.id ==activeId?'#555':'#02A7F0'"></uni-icons>
                <text :class="['text', {'lastText': item.id == activeId}, {activeText: item.id != activeId}]" @click="preStep(item.id)">{{item.name}}</text>
            </view>
        </view>
        <view class="org-box" v-if="showMailList.length>0 || adminList.length>0">
            <view v-for="(org, i) in showMailList" :key="i">
                <!-- 组织显示 -->
                <view class="txl-org-item" :class="{'checkbox-org-item': operationType==2}" v-if="org.type" @click="nextStep(org)">
                    <!-- {{JSON.stringify(departmentIds)}} -->
                    <view v-if="operationType==2">
                        <uni-icons v-if="departmentIds.findIndex(item=>item.id == org.id && org.type==item.stratum)!=-1" type="checkbox-filled" color="#02A7F0" size="42rpx"></uni-icons>
                        <uni-icons v-else type="circle" size="40rpx"></uni-icons>
                    </view>
                    <view class="logo-name">
                        <image class="logo" src="/static/txl/zzjg-icon.png" mode="aspectFill"></image>
                        <text class="name">{{org.name}}<text class="number">({{org.type!=3?org.children.length:org.admins?(org.admins.length+org.students.length):org.students.length}}{{org.type==3?'人':''}})</text></text>
                        
                    </view>
                    <text class="btn" :style="{color: '#d7d7d7'}" v-if="operationType==2&&departmentIds.findIndex(item=>item.id == org.id && org.type==item.stratum)!=-1" @click.stop="()=>{}">下级</text>
                    <text class="btn" v-else-if="operationType==2" @click.stop="nextStep(org, 'btn')">下级</text>
                    <uni-icons v-else-if="operationType==1" type="right" color="#aaa"></uni-icons>
                </view>
                <!-- 最后一层成员展示 operationType==2 代表可是选择成员或者组织 -->
                <view class="txl-org-item" :class="{'checkbox-org-item': operationType==2 || operationType==3}" v-else @click="userDetails(org)">
                    <view v-if="operationType==2 || operationType==3">
                        <uni-icons v-if="org.userType==2&&studentIds.indexOf(org.accountId)!=-1 || org.userType==1&&adminIds.indexOf(org.accountId)!=-1" type="checkbox-filled" color="#02A7F0" size="40rpx"></uni-icons>
                        <uni-icons v-else type="circle" :style="{color: roleType==1&&org.userType!=1?'#e4e4e4':'#333'}" size="40rpx"></uni-icons>
                    </view>
                    <view class="logo-name">
                        <image class="logo" :src="utils.headImage(org)" mode="aspectFill"></image>
                        <text class="name">{{org.name}}</text>
                    </view>
                    <view class="" v-if="org.type==4">
                        <text class="type" v-if="0">校长</text>
                        <uni-icons customPrefix="iconfont" type="icon-icon--" size="40rpx"></uni-icons>
                    </view>
                </view>
            </view>
            <!-- 老师列表 -->
            <view v-for="(org) in adminList" :key="parseInt(org.id)+200000">
                <view class="txl-org-item" :class="{'checkbox-org-item': operationType==2 || operationType==3}" @click="userDetails(org)">
                    <view v-if="operationType==2 || operationType==3">
                        <uni-icons v-if="adminIds.indexOf(org.accountId)!=-1" type="checkbox-filled" color="#02A7F0" size="42rpx"></uni-icons>
                        <uni-icons v-else type="circle" size="40rpx"></uni-icons>
                    </view>
                    <view class="logo-name">
                        <image class="logo" :src="utils.headImage(org)" mode="aspectFill"></image>
                        <text class="name">{{org.name}}</text>
                    </view>
                    <view class="" v-if="org.type==4">
                        <text class="type" v-if="0">校长</text>
                        <uni-icons customPrefix="iconfont" type="icon-icon--" size="40rpx"></uni-icons>
                    </view>
                </view>
            </view>
        </view>
        <view class="no-org-box" v-else>
            暂无联系人
        </view>
	</view>
</template>
<script>
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
export default {
    components: {
        uniNavBar
    },
	data() {
		return{
			name: '同济大学第一附属中学',
			showMailList: [],
			adminList: [],
            activeId: '',
            allTeaStu: [],
            studentIds: [],
            adminIds: [],
            departmentIds: [],
            showRadio: true,
            selectAllInfo: []
		} 
	},
    props: {
        mailList: {
            type: Object,
            default: () => {}
        },
        stepBar: {
            type: Array,
            default: () => []
        },
        operationType: { // 操作类型 1.组织架构展示 2.创建群组 3.添加星际联系人
            type: Number,
            default: 0
        },
        editBar: {
            type: Number,
            default: -1
        },
        isOnshow: {
            type: Number,
            default: 0
        },
        roleType: {
            type: String,
            default: ''
        },
    },
    watch: {
        editBar: function(val){
            this.preStep(this.stepBar[val].id)
        },
        isOnshow: function(val){
           this.selectInfo()
        }
    },
	mounted() {
		this.infoData()
        this.selectInfo()
	},
	methods: {
        // 先处理已经选择的成员信息
        selectInfo(){
            this.showRadio = false
            this.departmentIds = []
            this.studentIds = []
            this.adminIds = []
            let allInfo = uni.getStorageSync('xdSelectAllInfo') || []
            this.selectAllInfo = allInfo
            for(let i=0; i<allInfo.length; i++){
                let info = allInfo[i]
                if(info.userType==2){
					this.studentIds.push(info.accountId)
				}else if(info.userType==1){
					this.adminIds.push(info.accountId)
				}else{
                    this.departmentIds.push({id: info.id, stratum: info.orgType})
                }
            }
            this.showRadio = true
        },
        radioChange(info, type, userType){
            let index = -1;
            if(type>0){
                info.avatarUrl = '/static/txl/zzjg-icon.png'
                index = this.departmentIds.findIndex(item=>item.id == info.id)
                
                if(index!=-1){
                    this.departmentIds.splice(index, 1)
                }else{
                    this.departmentIds.push({id: info.id, stratum: type})
                }
                
            }else if(userType == 2){
                index = this.studentIds.indexOf(info.accountId);
                if(index!=-1){
                    this.studentIds.splice(index, 1)
                }else{
                    this.studentIds.push(info.accountId)
                }
                
            }else if(userType == 1){
                index = this.adminIds.indexOf(info.accountId);
                if(index!=-1){
                    this.adminIds.splice(index, 1)
                }else{
                    this.adminIds.push(info.accountId)
                }
            }
            let obj = {
                department: this.departmentIds,
                student: this.studentIds,
                admin: this.adminIds
            }
            let item = {accountId: info.accountId, id: info.id, type: `${info.type||0}:${info.id}`, orgType: info.type, avatarUrl: info.avatarUrl||'', name: info.name, userType: info.userType, sex: info.sex}
            this.$emit('selectIds', obj, item)
        },
		infoData(){
            
            this.stepBar.splice(1);
 
            let data = this.mailList;
            this.adminList = data.admins;

            this.showMailList = data.children || [];
            
            this.activeId = data.tableId

            let item = {name: data.name, id: data.tableId}
            this.stepBar.push(item)

		},
        preStep(id){
            if(id == -1){
                this.$emit('selectGroup', id)
                return
            }
			if(this.activeId == id) return;
			this.activeId = id;
			let type = this.stepBar.findIndex(item => item.id==id);
			type = type

			this.stepBar.splice(type+1)
			if(type==1){
				this.showMailList = this.mailList.children;
				this.adminList = this.mailList.admins;
			}else if(type == 2){
				let data = this.mailList.children.find(item=>item.tableId == id);
				this.showMailList = data.children;
				this.adminList = data.admins;
			}else if(type == 3){
			}
		},
		nextStep(info, position){
			if(this.operationType == 2 && position!='btn'){
                this.radioChange(info, info.type, info.id);
                return
            }
			this.activeId = info.tableId || info.id;
            
			if(info.type==3){
                this.showMailList = info.admins?info.admins.concat(info.students):info.students
                this.adminList = []
                
				let admins = info.admins || []
				this.dataList = admins.concat(this.dataList)
				// this.adminList = [];
			} else {
                this.showMailList = info.children
                this.adminList = info.admins
            }
            let item = {name: info.name, id: this.activeId}
			this.stepBar.push(item)

		},
        // 用户详情页
        userDetails(item){
            if(this.roleType==1 && item.userType!=1){
                // 只选择教师
                return
            }
            let userType = item.userType?item.userType:1
            if(this.operationType == 2 || this.operationType == 3){
                this.radioChange(item, 0, userType);
                return
            }
			this.utils.userDetails(item.accountId, item.userType)
		}
	}
}
</script>
<style lang="less" scoped>
	.no-org-box{
		text-align: center;
		margin-top: 100rpx;
	}
</style>